<template>
    <el-dialog :visible.sync="detailsDialogVisible" width="60%" :fullscreen="isMobileScreen" transition="dialog-fade">
        <section class="column">
            <h3 class="dialog-title">用户详情</h3>
            <div style="flex: 1 0 100%;  overflow-y: scroll;">


                <!-- 个人信息部分 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>用户信息：</span>
                    </div>
                    <div class="text item">
                        <div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>姓名:</strong> {{ baseInfo.trealname }}</p>
                                </div>
                                <div class="detail-item" v-if="isHavePermission(['member:baseinfo:phone'])">
                                    <p  class="clickable-phone"> <strong>手机号:</strong>
                                        {{  baseInfo.tmobile }}
                                    </p>
                                </div>
                                <div class="detail-item" v-else>
                                    <p> <strong>手机号:</strong>
                                        {{ baseInfo.tmobile }}
                                    </p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>uid:</strong> <span>{{ baseInfo.uid
                                    }}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>授信额度:</strong> {{ baseInfo.creditLimitAmount }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>渠道名称:</strong> {{ baseInfo.channelName }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>注册应用:</strong> {{ baseInfo.regAppCode }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>用户类型:</strong> {{ baseInfo.type }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>注册类型:</strong> {{ baseInfo.regType }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>注册ip:</strong> {{ baseInfo.regReqIp }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>是否认证:</strong>
                                        <span :style="{ color: baseInfo.authFlag === 0 ? 'red' : 'green' }">
                                            {{ baseInfo.authFlag === 0 ? '未认证' : '已认证' }}
                                        </span>
                                    </p>

                                </div>
                                <div class="detail-item">
                                    <p><strong>是否人脸:</strong>
                                        <span :style="{ color: baseInfo.faceFlag === 0 ? 'red' : 'green' }">
                                            {{ baseInfo.faceFlag === 0 ? '未识别' : '已校验' }}
                                        </span>
                                    </p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>资质上传:</strong>
                                        <span :style="{ color: baseInfo.sourceFlag === 0 ? 'red' : 'green' }">
                                            {{ baseInfo.sourceFlag === 0 ? '未上传' : '已上传' }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <div style="margin-bottom: 20px;"></div>

                <!-- 资质信息部分 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>资质信息：</span>
                    </div>
                    <div class="text item">
                        <div v-if="selectedRow">
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>姓名:</strong> {{ selectedRow.trealname }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>年龄:</strong> {{ selectedRow.age }}岁</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>性别:</strong> {{ selectedRow.sex === 1 ? '男' : '女' }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>身份证:</strong> {{ selectedRow.tidcard }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>省份:</strong> {{ selectedRow.province }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>城市:</strong> {{ selectedRow.city }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>学历:</strong> {{ selectedRow.xueli }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>工作:</strong> {{ selectedRow.gongzuo }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>薪资:</strong> {{ selectedRow.shouru }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>贷款金额:</strong> {{ selectedRow.loanAmount }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>贷款时间:</strong> {{ selectedRow.loanTime }}</p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>贷款用途:</strong> {{ selectedRow.yongtu }}</p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>芝麻分数:</strong> <span :style="getTextColor(selectedRow.zhima)">{{
                                        selectedRow.zhima }}</span></p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>花呗:</strong> <span :style="getTextColor(selectedRow.huabei)">{{
                                        selectedRow.huabei }}</span></p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>白条:</strong> <span :style="getTextColor(selectedRow.baitiao)">{{
                                        selectedRow.baitiao }}</span></p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>房产:</strong> <span :style="getTextColor(selectedRow.house)">{{
                                        selectedRow.house }}</span></p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>车产:</strong> <span :style="getTextColor(selectedRow.car)"> {{
                                        selectedRow.car }}</span></p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>社保:</strong> <span :style="getTextColor(selectedRow.shebao)">{{
                                        selectedRow.shebao }}</span></p>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p><strong>商业保险:</strong> <span :style="getTextColor(selectedRow.baoxian)"> {{
                                        selectedRow.baoxian }}</span> </p>
                                </div>
                                <div class="detail-item">
                                              <p><strong>公积金:</strong> <span :style="getTextColor(selectedRow.gjj)">{{
                                        selectedRow.gjj }} </span> </p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>是否逾期:</strong> {{ selectedRow.yuqi }}</p>
                                </div>
                            </div>
                            <!-- <div class="detail-row">
                                <div class="detail-item">

                                    <p><strong>微粒花:</strong> <span :style="getTextColor(selectedRow.weili)">{{
                                        selectedRow.weili }}</span> </p>
                                </div>
                                <div class="detail-item">
                                    <p><strong>信用卡:</strong> <span :style="getTextColor(selectedRow.xinyongka)">{{
                                        selectedRow.xinyongka }} </span></p>
                                </div>
                                <div class="detail-item">
                                </div>
                            </div> -->
                        </div>
                        <div v-else>
                            <p>该用户尚未上传资质信息。</p>
                        </div>
                    </div>
                </el-card>

                <div style="margin-bottom: 20px;"></div>

                <!-- 用户推送信息 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>推送信息：</span>
                    </div>
                    <div class="text item">
                        <div class="detail-row">
                            <div class="detail-item">
                                <p><strong>机构信息:</strong></p>
                            </div>
                            <div class="detail-item">
                              <p><strong>推送单价:</strong></p>
                            </div>
                            <div class="detail-item">
                                <p><strong>推送状态:</strong></p>
                            </div>
                            <div class="detail-item">
                                <p><strong>推送时间:</strong></p>
                            </div>
                        </div>
                    </div>
                    <div v-for="item in (pushInfo || [])">
                        <div class="text item">
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p> {{ item.nameAndType }}</p>
                                </div>
                              <div  class="detail-item">
                                <p> {{ !['MATCH_FAILED', 'INIT', 'GET_APPROVE_FAILED'].includes(item.status) ? item.priceAmount : ''}}</p>
                              </div>
                                <div class="detail-item">
                                    <p>
                                        {{ item.status === 0 ? '未分配给员工' : item.status === 1 ? '已分配给员工' : item.status }}
                                    </p>
                                </div>
                                <div class="detail-item">
                                    <p>{{ formatTimestamp(item.createTime) }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="!(pushInfo || []).length">
                        <p>该用户没有被推送。</p>
                    </div>
                </el-card>

                <div style="margin-bottom: 20px;"></div>

                        <!-- 用产品信息 -->
                        <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>产品信息：</span>
                    </div>
                    <div class="text item">
                        <div class="detail-row">
                            <div class="detail-item">
                                <p><strong>产品信息:</strong></p>
                            </div>
                            <div class="detail-item">
                                <p><strong>IP:</strong></p>
                            </div>
                            <div class="detail-item">
                                <p><strong>推送时间:</strong></p>
                            </div>
                        </div>
                    </div>
                    <div v-for="item in (productInfo || [])">
                        <div class="text item">
                            <div class="detail-row">
                                <div class="detail-item">
                                    <p> {{ item.idAndName }}</p>
                                </div>
                                <div class="detail-item">
                                    <p>
                                        {{ item.reqIp }}
                                    </p>
                                </div>
                                <div class="detail-item">
                                    <p>{{ formatTimestamp(item.createTime) }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="!(productInfo || []).length">
                        <p>该用户没有选择产品。</p>
                    </div>
                </el-card>
            </div>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>公众号信息：</span>
            </div>
            <div class="text item">
              <div class="detail-row">

                <div class="detail-item">
                  <p><strong>公众号及企微名称:</strong></p>
                </div>
                <div class="detail-item">
                  <p><strong>点击时间:</strong></p>
                </div>
              </div>
            </div>
            <div v-for="item in (appletCountInfo || [])">
              <div class="text item">
                <div class="detail-row">
                  <div class="detail-item">
                    <span v-if="item.open === 1" class="tag">打开</span>
                    <span v-if="item.press === 1" class="tag">长按</span>
                    <span v-if="item.openWeCom === 1" class="tag">打开企微</span>
                    <span v-if="item.pressWeCom === 1" class="tag">长按企微</span>
                    {{ item.officialName }}
                  </div>
<!--                  <div class="detail-item">-->
<!--                    <p>-->
<!--                      {{ item.reqIp }}-->
<!--                    </p>-->
<!--                  </div>-->
                  <div class="detail-item">
                    <p>{{ formatTimestamp(item.createTime) }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="!(appletCountInfo || []).length">
              <p>该用户没有进入公众号。</p>
            </div>
          </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDetailsDialog">关闭</el-button>
            </span>

        </section>
    </el-dialog>
</template>

<style>
.el-dialog__body {
    height: calc(100% - 60px);
}
</style>

<style scoped>
.column {
    display: flex;
    flex-direction: column;
    height: 100%;

}

/* 原始样式 */
.detail-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}


.detail-item {
    flex: 1;
    margin-right: 20px;
}

.dialog-footer {
    /* position: absolute; */
    right: 20px;
    /* 可以调整按钮与弹窗右侧的距离 */
    bottom: 20px;
    /* 可以调整按钮与弹窗底部的距离 */
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}


.dialog-title {
    text-align: center;
    font-size: 20px;
    margin-top: -20px;
    margin-bottom: 10px;
    /* 用户详情标题的样式，您可以根据需要进行调整 */
}


.clickable-phone {
    cursor: pointer;
    color: blue;
}


.clickable-phone:hover {
    color: red;
}
</style>




<script>
import { listSourceCardInfo } from "@/api/member/sourceInfo";
import { listBaseinfo, getPhone, listPushInfo } from "@/api/member/baseinfo";
import { listProfitUvInfo } from "@/api/product/profitUvInfo";
import { isHavePermission } from '@/directive/permission/hasPermi'
import {listCount} from "@/api/applet/count";
export default {
    name: "member",
    computed: {
        isMobileScreen() {
            return window.innerWidth <= 768;
        }
    },
    data() {
        return {
            detailsDialogVisible: false, // 弹窗可见状态
            selectedRow: {},
            pushInfo: [],
            productInfo: [],
            sourceInfoList: [],
            listBaseinfo: [],
            listPushInfo: [],
            appletCountInfo: [],
            getPhone: [],
            baseInfo: {
                tmobile: '脱敏手机号',
            },
            originalMobile: '', // 存储原始手机号
            showOriginalNumber: false,
            scrollPosition: 0,
        };
    },
    methods: {

        /**更改创建时间格式 */
        formatTimestamp(timestamp) {
            if (!timestamp) {
                return '';
            }
            const date = new Date(timestamp);
            const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
            return formattedDate;
        },
        getTextColor(text) {
            if (text && typeof text === 'string') {
                return text.includes('无') ? 'color: red;' : 'color: black;';
            }
            return 'color: black;';
        },
        isHavePermission,
        async show(uid) {
            try {
                const [baseInfoResponse, sourceCardInfoResponse, pushdataResponse,ProfitUvInfoResponse,appletCountInfoResponse] = await Promise.all([
                    listBaseinfo({ uid }),
                    listSourceCardInfo({ uid }),
                    listPushInfo({ uid }),
                    listProfitUvInfo({ uid }),
                    listCount({uid})
                ]);


                // 处理baseInfo接口的数据
                this.baseInfo = baseInfoResponse.rows[0];

                this.pushInfo = pushdataResponse.rows;
                this.productInfo = ProfitUvInfoResponse.rows;
                this.appletCountInfo =appletCountInfoResponse.rows;

                // 处理资质接口的数据
                this.selectedRow = sourceCardInfoResponse.rows[0];
                // 显示弹窗
                this.detailsDialogVisible = true;
            } catch (error) {
                console.error("Error fetching details:", error);
                this.$message.error("Failed to fetch details information.");
            }
        },
        async fetchOriginalMobile() {
            const newUid = this.baseInfo.uid
            try {
                const phoneResponse = await getPhone(newUid)
                this.originalMobile = phoneResponse.data.mobile
                this.showOriginalNumber = !this.showOriginalNumber;
            } catch (error) {
                console.error("Error fetching original mobile number:", error);
            }
        },
        closeDetailsDialog() {
            this.baseInfo = {}; // 清空数据对象
            this.selectedRow = {};
            this.detailsDialogVisible = false;
            this.showOriginalNumber = false;
        },
    }

};
</script>
